<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!--.prevent阻止表单的默认提交-->
			<form action="/***" @submit.prevent="ajaxSubmit">
				用户名：<input type="text" v-model="username" /><br />
				密码：<input type="password" v-model="passwd" /><br />
				性别：
				<input type="radio" v-model="sex" value="1"/>男
				<input type="radio" v-model="sex" value="2"/>女<br />
				爱好：
				<!--定义一个数组进行接收-->
				<input type="checkbox" v-model="likes" value="lanqiu"/>篮球
				<input type="checkbox" v-model="likes" value="zuqiu"/>足球
				<input type="checkbox" v-model="likes" value="ganlanqiu"/>橄榄球<br />
				城市：
				<select v-model="city">
					<option value="">---请选择---</option>
					<!--这里的value需要进行绑定，不然普通的value无法解析city.id-->
					<option :value="city.id" v-for="(city,index) in allCity" :key="index">{{city.name}}</option>
				</select><br />
				介绍：
				<textarea v-model="desc"></textarea><br />
				<button type="submit">提交</button>
			</form>
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script type="text/javascript">
		new Vue({
			el:"#app",
			data:{
				username:"",
				passwd:"",
				sex:"1",//设置默认勾选
				likes:["lanqiu"],//设置为默认勾选
				allCity:[{"id":1,"name":"sz"},{"id":2,"name":"bj"},{"id":3,"name":"sh"},{"id":4,"name":"hz"}],
				city:"",
				desc:""
			},
			methods:{
				//这里获取到表单的数据，发送ajax请求即可
				ajaxSubmit(){
					console.log(this.username,this.passwd,this.sex,this.likes,this.city,this.desc)
				}
			}
		})
	</script>
</html>
